/*静态数据*/
import { useState } from 'react';

const TaskManager = () => {
    const [tasks, setTasks] = useState([
        {
            id: 1,
            feedback: '应用程序崩溃了，请修复这个bug。',
            category: 'Bug报告',
            priority: '高',
            status: '待处理',
        },
        {
            id: 2,
            feedback: '希望添加一个夜间模式功能。',
            category: '功能请求',
            priority: '中',
            status: '待处理',
        },
        {
            id: 3,
            feedback: '界面设计非常棒！',
            category: '一般意见',
            priority: '低',
            status: '待处理',
        },
    ]);

    const updateTaskStatus = (id, status) => {
        setTasks(tasks.map(task => (task.id === id ? { ...task, status } : task)));
    };

    return (
        <div className="p-6 bg-white rounded-lg shadow-md">
            <h2 className="text-2xl font-bold mb-4">任务管理</h2>
            <ul>
                {tasks.map(task => (
                    <li key={task.id} className="mb-4">
                        <p>反馈: {task.feedback}</p>
                        <p>分类: {task.category}</p>
                        <p>优先级: {task.priority}</p>
                        <p>状态: {task.status}</p>
                        <button
                            onClick={() => updateTaskStatus(task.id, '处理中')}
                            className="px-4 py-2 bg-yellow-500 text-white rounded hover:bg-yellow-700 mr-2"
                        >
                            处理中
                        </button>
                        <button
                            onClick={() => updateTaskStatus(task.id, '已完成')}
                            className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-700"
                        >
                            已完成
                        </button>
                    </li>
                ))}
            </ul>
        </div>
    );
};

export default TaskManager;


/*有后端*/
/*
* import React, { useEffect, useState } from 'react';
import axios from 'axios';

const TaskManager = () => {
    const [tasks, setTasks] = useState([]);

    useEffect(() => {
        const fetchTasks = async () => {
            const response = await axios.get('/api/tasks');
            setTasks(response.data);
        };
        fetchTasks();
    }, []);

    const updateTaskStatus = async (id, status) => {
        try {
            const response = await axios.put(`/api/tasks/${id}`, { status });
            setTasks(tasks.map(task => (task.id === id ? response.data : task)));
        } catch (error) {
            console.error('Error updating task status:', error);
        }
    };

    return (
        <div className="p-6 bg-white rounded-lg shadow-md">
            <h2 className="text-2xl font-bold mb-4">任务管理</h2>
            <ul>
                {tasks.map(task => (
                    <li key={task.id} className="mb-4">
                        <p>反馈: {task.feedback}</p>
                        <p>分类: {task.category}</p>
                        <p>优先级: {task.priority}</p>
                        <p>状态: {task.status}</p>
                        <button
                            onClick={() => updateTaskStatus(task.id, '处理中')}
                            className="px-4 py-2 bg-yellow-500 text-white rounded hover:bg-yellow-700 mr-2"
                        >
                            处理中
                        </button>
                        <button
                            onClick={() => updateTaskStatus(task.id, '已完成')}
                            className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-700"
                        >
                            已完成
                        </button>
                    </li>
                ))}
            </ul>
        </div>
    );
};

export default TaskManager;
*
* */